<template>
  <el-page-header @back="toBack">
    <template #title>返回</template>
    <template #content>
        发布说说
    </template>
  </el-page-header>
  
  <!-- 文本内容 -->
    <el-input
        type="textarea"
        placeholder="文本内容"
        :autosize="{minRows: 6,maxRows: 8}"
        v-model="content"
        class="text"
    ></el-input>
    <br/>
  <!-- 标签 -->
  <!-- 展示选择的标签 -->
  <el-col class="showgroup" v-if="showTagList.length > 0" :span="4">
    <el-tag closable @close="closeTag(index)" v-for="(tag,index) in showTagList" :key="index">
      {{ tag.name }}
    </el-tag>
  </el-col>
  <el-button @click="showTags">
    <el-icon><Plus/></el-icon>标签
  </el-button>
  <!-- 标签选择对话框 -->
  <el-dialog
   v-model="tagListVisible"
   width="400px"
   modal
   align-center
   >
    <el-checkbox-group class="checkgroup" v-model="selectedTagList">
      <el-checkbox-button  v-for="(tag,index) in tagList" :key="index" :label="tag">
        {{ tag.name }}
      </el-checkbox-button>
    </el-checkbox-group>
    <template #footer>
      <el-button @click="tagCancel">取消</el-button>
      <el-button type="primary" @click="tagSelect">确定</el-button>
    </template>
  </el-dialog>
  <!-- 照片 -->
      <el-upload
        :file-list="imageBox"
        list-type="picture-card"
        :on-preview="preview"
        :auto-upload="false"
        :on-change="change"
        :on-remove="del"
        method="post"
      >
      <template #trigger>
          <el-icon><Plus/></el-icon>
      </template>

        
      </el-upload>

      <el-dialog v-model="dialogVisible">
        <img w-full src="dialogImageUrl" alt="Preview Image">
      </el-dialog>

      <!-- 是否匿名 -->
      <el-col style="height: 50px;line-height: 50px;">
        是否匿名：
        <el-radio-group v-model="ifAnonymous">
          <el-radio-button label="匿名"></el-radio-button>
          <el-radio-button label="不匿名"></el-radio-button>
        </el-radio-group>
      </el-col>
      <el-button class="ml-3" type="success" @click="submit">
          upload to server
      </el-button>
 
</template>

<script setup>
import { inject, reactive,ref } from "vue";
import { Plus } from '@element-plus/icons-vue'
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { upload,getDynamicTagList,shareDynamic } from "@/api/dynamic";

  const router = useRouter();

    let content = ref();
    const imageBox = ref([])
    const imageUrl = reactive(new Map());
    console.log("imageBox:",imageBox.value)

    let dialogImageUrl = ref('');
    let dialogVisible = ref(false);
    let preview= (uploadFile) => {
        dialogImageUrl.value = uploadFile.url
        dialogVisible.value = true
    }

    //当前用户对象
    const store = useStore();
    const user = store.state.user;
    
    

    //返回
    function toBack() {
      router.back();
    }

    //添加图片
    async function change(file,files) {
      console.log("file:",file)
      let formData = new FormData()
      formData.append('file',file.raw);
      let url = await upload(formData);
      console.log(url);
      imageUrl.set(file.name,url)
    }

    //删除图片
    function del(file,files) {
      imageUrl.delete(file.name);
    }

    //当前时间
    const nowDate = inject('nowDate');
    

   

  let ifAnonymous = ref(false);

  let showTagList = reactive([]); //用于展示的标签列表

  let uploadTagList = reactive([]); //用于上传的标签id

  let tagList = reactive([]); //从后端获取到的标签列表
  
  let selectedTagList = ref([]); //选择的标签列表,ref才能多选
  // let selectedTags = ref([]);

  //标签对话框控制阀
  let tagListVisible = ref(false);
  //展示选择标签对话框
  async function showTags() {
    tagList = await getDynamicTagList();
    tagListVisible.value = true;
  }
  
  //标签选择取消
  function tagCancel() {
    selectedTagList = [];
    tagListVisible.value = false;
  }

  //标签选择确定
  async function tagSelect() {
    showTagList = selectedTagList.value;
     
    for(let object of showTagList) {
      uploadTagList.push(object.id)
    }
    console.log('showTagList',selectedTagList.value);
    tagListVisible.value = false;
  }

  //关闭标签
  function closeTag(index){
    showTagList.splice(index,1);
    console.log('关闭后的标签：',showTagList);
  }
  
   //发布说说
   async function submit() {
      await shareDynamic(content.value,[...imageUrl.values()],uploadTagList,ifAnonymous);
      router.push('/talk');
    }
    
</script>

<style scoped>

/* 文本内容 */
.text {
    width: 800px;
    font-size: 20px;
    
}

/* 标签选择组 */
.checkgroup {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;

}

/* 标签展示组 */
.showgroup {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

</style>